<template>
  <div class="person">
    <div class="title">个人信息</div>
    <div class="container">
      <!-- <div class="nav"></div> -->
      <div class="userInfo">
        <div class="header">
          <div class="pic">
            <img :src="userInfo.header_img" alt="" class="profile-photo" />
          </div>
          <div class="userInfo-text">
            <p class="user-name">{{ userInfo.name }}</p>
            <p class="user-sex">男</p>
          </div>
        </div>
        <div class="con">
          <div class="status">
            <p>待付款</p>
            <span>|</span>
            <p>待发货</p>
            <span>|</span>
            <p>待收货</p>
            <span>|</span>
            <p>待评价</p>
            <span>|</span>
            <p>退款</p>
          </div>
          <ul class="operate">
            <li @click="goAddress">
              <span><i class="el-icon-s-promotion"></i>修改用户地址</span
              ><i class="el-icon-caret-right"></i>
            </li>
            <li @click="open">
              <span><i class="el-icon-s-custom"></i>修改用户信息</span
              ><i class="el-icon-caret-right"></i>
            </li>
            <li @click="goCart">
              <span><i class="el-icon-s-goods"></i>进入购物车</span
              ><i class="el-icon-caret-right"></i>
            </li>
            <li @click="goOrderList">
              <span><i class="el-icon-s-order"></i>查看订单</span
              ><i class="el-icon-caret-right"></i>
            </li>
          </ul>
        </div>
      </div>
      <div class="other">
        <el-calendar v-model="value"></el-calendar>
      </div>
    </div>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form
        :model="userInfo"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm formCon"
      >
        <el-form-item label="上传头像" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="http://shop.bluej.cn/api/update"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="userInfo.header_img"
              :src="userInfo.header_img"
              class="avatar imgSize"
              style="width: 200px; height: 200px"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名" prop="name">
          <el-input
            type="test"
            v-model="userInfo.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input
            type="test"
            v-model="userInfo.phone"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="userInfo.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="afreshPassword">
          <el-input
            type="password"
            v-model="afreshPassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateUserFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { updateUser } from "../assets/request.js";
export default {
  data() {
    var checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      } else {
        callback();
      }
    };
    var checkPhone = (rule, value, callback) => {
      const reg = /^\d{11}$/;
      if (!reg.test(value)) {
        return callback(new Error("手机号格不正确"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      const reg = /^\w{6,12}$/;
      if (value === "") {
        return callback(new Error("请输入密码"));
      } else if (!reg.test(value)) {
        return callback(new Error("密码格式"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (this.afreshPassword !== this.userInfo.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      dialogFormVisible: false,
      dialogTableVisible: false,
      dialogPpicVisible: false,
      formLabelWidth: "120px",
      id: "",
      afreshPassword: "",
      userInfo: {
        name: "",
        password: "",
        phone: "",
        header_img: "",
      },
      user: {},
      value: new Date(),
      rules: {
        password: [{ validator: validatePass, trigger: "blur" }],
        afreshPassword: [{ validator: validatePass2, trigger: "blur" }],
        name: [{ validator: checkName, trigger: "blur" }],
        phone: [{ validator: checkPhone, trigger: "blur" }],
      },
    };
  },
  methods: {
    goAddress() {
      this.$router.push({ name: "address" });
    },
    goCart() {
      this.$router.push({ name: "cart" });
    },
    goOrderList() {
      this.$router.push({ name: "orderlist" });
    },
    goReviseUser() {},
    open() {
      this.dialogFormVisible = true;
    },
    handleAvatarSuccess(res, file) {
      this.userInfo.header_img = res.result.path;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    openPicDialog() {
      this.dialogPpicVisible = true;
    },
    postPic() {},
    closeDialog() {
      this.dialogFormVisible = false;
    },
    async putUser() {
      const res = await updateUser(this.userInfo, this.id);
      sessionStorage.setItem("user", JSON.stringify(res.data.result));
    },
    updateUserFn() {
      this.putUser();
      this.getUser();
      this.dialogTableVisible = false;
    },
    getUser() {
      this.user = JSON.parse(sessionStorage.getItem("user"));
      this.userInfo.header_img = this.user.header_img;
      this.userInfo.name = this.user.name;
      this.userInfo.password = this.user.password;
      this.userInfo.phone = this.user.phone;
      this.id = this.user.id;
    },
  },
  mounted() {
    this.getUser();
  },
};
</script>

<style lang="scss">
.person {
  width: 100%;
  height: 100%;
  .title {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 1200px;
    height: 50px;
    margin: 0 auto;
    font-size: 20px;
  }
  .container {
    display: flex;
    justify-content: space-between;
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 50px;

    .userInfo {
      width: 800px;
      .header {
        display: flex;
        height: 100px;
        padding: 20px;
        .pic {
          width: 100px;
          height: 100px;
          margin-right: 50px;
          border-radius: 100px;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .userInfo-text {
          width: 200px;
          height: 100%;
          padding-top: 50px;
          font-size: 16px;
          .user-name {
            font-size: 24px;
          }
        }
      }
      .con {
        width: 100%;
        .status {
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          width: 100%;
          height: 60px;
          display: flex;
          p {
            font-size: 16px;
            letter-spacing: 5px;
          }
        }
        .operate {
          li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 10px;
            margin: 5px 0;
            font-size: 16px;
            i {
              margin-right: 10px;
            }
            &:hover {
              box-shadow: 0 5px 10px lightgray;
            }
          }
        }
      }
    }
    .other {
      width: 400px;
      // height: 500px;
      background-color: #2f333a;
    }
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar-uploader {
      width: 200px;
      height: 200px;
      .avatar {
        display: block;
      }
    }
  }
}
</style>
